<template>
  <div class="app-content">
    <el-card :style="{ width }" class="mx-auto">
      <img :src="userStore.avatar" alt="用户头像" class="wh-64px mx-auto b-rd-50%" />

      <div class="flex-center my-16px">
        <el-text type="warning">无论你欲往何方，此处仍是故乡。</el-text>
      </div>

      <el-form :model="profileForm" :rules="profileFormRules" label-width="80px" ref="updateProfileFormRef">
        <el-form-item label="真实姓名">
          <el-input :value="userStore.user.realname" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属账号">
          <el-input :value="userStore.user.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model.trim="profileForm.nickname" placeholder="请输入用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model.trim="profileForm.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="用户年龄" prop="age">
          <el-input v-model.number="profileForm.age" placeholder="请输入用户年龄"></el-input>
        </el-form-item>
        <el-form-item label="QQ号码" prop="qq">
          <el-input v-model="profileForm.qq" placeholder="请输入QQ号码"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="gender">
          <el-select v-model.number="profileForm.gender">
            <el-option label="未知" :value="0" />
            <el-option label="男性" :value="1" />
            <el-option label="女性" :value="2" />
          </el-select>
        </el-form-item>

        <div class="flex-center">
          <ep-button type="primary" @click="submit" svg-icon="Save">提交修改</ep-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: 'Profile' })
import { pick } from 'lodash-es'
import { TipModal } from '@/utils'
import type { FormInstance, FormRules } from 'element-plus'
import { UserRequest } from '@/api/system/user.request'

const appStore = useAppStore()
const userStore = useUserStore()

const width = computed(() => (appStore.isDesktop ? '640px' : '100%'))
const updateProfileFormRef = shallowRef<FormInstance>()
const profileForm = ref({} as UserType.UpdateProfile)
const loading = ref<boolean>(false)
const profileFormRules: FormRules<UserType.UpdateProfile> = {
  phone: [{ required: true, message: '手机号码不可为空', trigger: 'blur' }],
  nickname: [{ required: true, message: '用户昵称不可为空', trigger: 'blur' }],
  age: [{ required: true, message: '用户年龄不可为空', trigger: 'blur' }],
  qq: [{ required: true, message: 'QQ号码不可为空', trigger: 'blur' }],
  gender: [{ required: true, message: '性别不可为空', trigger: 'change' }],
}

async function submit() {
  try {
    await updateProfileFormRef.value?.validate()
    loading.value = true
    const data = await UserRequest.updateProfile(profileForm.value)
    TipModal.msgSuccess(data || '修改成功')
    await userStore.getInfo()
    loading.value = false
  } catch (error: any) {
    loading.value = false
  }
}

onMounted(() => {
  profileForm.value = pick(userStore.user, ['age', 'phone', 'nickname', 'qq', 'gender'])
})
</script>

<style lang="scss" scoped></style>
